<template>
  <div id="askWords" v-cloak>
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <ul class="list-group">
            <li class="list-group-item" v-for="(item,index) in frontData.List" :key="index">
              <div class="row">
                <div class="col-md-2 col-sm-2 col-xs-3 words">
                  <img :src="firstString+item.imgurl" alt="就问语录" class="imgZone">
                </div>
                <div class="col-md-10 col-sm-10 col-xs-9 ">
                  <h5>
                    <span class="title">{{item.title}}</span>
                    <em class="time">{{item.created_at}}</em>
                  </h5>
                  <p class="miss">{{item.content}}</p>
                </div>
              </div>
            </li>

          </ul>
          <nav aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <router-link aria-label="Previous" v-show="currentPage>1" :to="detailUrl1+articleId.id+'/page/'+Number(currentPage-1)" @click.native="getCurrentPage(Number(currentPage-1))">
                  <span aria-hidden="true">上一页</span>
                </router-link>
              </li>
              <li v-for="(val,index) in totalPages" :key="index"><router-link :to="detailUrl1+articleId.id+'/page/'+Number(index+1)" @click.native="getCurrentPage(Number(index+1))">{{index+1}}</router-link></li>
              <li>
                <router-link aria-label="Previous" v-show="currentPage<totalPages" :to="detailUrl1+articleId.id+'/page/'+(Number(currentPage)+1)" @click.native="getCurrentPage(Number(currentPage)+1)">
                  <span aria-hidden="true">下一页</span>
                </router-link>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ask-words",
        props:['articleId','frontData','totalPages'],
        data(){
          return{
            firstString:'http://www.gengyong.com.cn',
            detailUrl1:'/advice/type/',
            detailUrl2:'/id/',
            //当前页
            currentPage:1
          }
        },
        methods:{
          //点击页码拿到当前页的数据
          getCurrentPage(current){
            //拿到当前文章的类型
            var id=this.articleId.id;
            //console.log('就问id'+id);
            //当前页的页码
            this.currentPage=current;
            //console.log('就问page'+current);
            //console.log( '就问页数'+this.totalPages);
            var _this=this;
            this.$http.get('http://www.gengyong.com.cn/api/advice',{
              params:{
                page:current,
                type:id
              }
            }).then(function(res){
              _this.frontData.List=res.data.info.info;
            }).catch(function(err){
              console.log(err);
            });
          }
        },
        mounted(){
          //页面加载完成时显示对应页的数据
          this.getCurrentPage(this.$route.params.page);
        }
    }
</script>

<style scoped>
  @import '../assets/css/advice.css';
  [v-cloak] {
    display: none;
  }
</style>
